
<template>
  <div class="store-information" :style="containerStyle">
    <!-- 样式一：底部信息 -->
    <div
      v-if="data.styleType === 'bottom-info'"
      class="store-card bottom-info"
    >
      <!-- 背景图片 -->
      <div class="background-image">
        <img
          :src="data.backgroundImage || defaultBackgroundImage"
          alt="店铺背景"
        />
      </div>

      <!-- 蒙版 -->
      <div
        class="overlay"
        :style="overlayStyle"
      />

      <!-- 店铺信息 -->
      <div class="store-info">
        <div class="store-avatar">
          <img
            :src="data.avatar || defaultAvatar"
            alt="店铺头像"
          />
        </div>

        <div class="store-details">
          <h3 class="store-name">{{ data.name || '店铺名称' }}</h3>
          <p class="store-description">{{ data.description || '店铺描述' }}</p>
        </div>
      </div>
    </div>

    <!-- 样式二：圆形头像 -->
    <div
      v-else-if="data.styleType === 'circular-avatar'"
      class="store-card circular-avatar"
    >
      <!-- 背景图片 -->
      <div class="background-image">
        <img
          :src="data.backgroundImage || defaultBackgroundImage"
          alt="店铺背景"
        />
      </div>

      <!-- 蒙版 -->
      <div
        class="overlay"
        :style="overlayStyle"
      />

      <!-- 店铺信息 -->
      <div class="store-info">
        <div class="store-avatar">
          <img
            :src="data.avatar || defaultAvatar"
            alt="店铺头像"
          />
        </div>

        <div class="store-details">
          <h3 class="store-name">{{ data.name || '店铺名称' }}</h3>
          <p class="store-description">{{ data.description || '店铺描述' }}</p>
        </div>
      </div>
    </div>

    <!-- 样式三：居中信息 -->
    <div
      v-else-if="data.styleType === 'center-info'"
      class="store-card center-info"
    >
      <!-- 背景图片 -->
      <div class="background-image">
        <img
          :src="data.backgroundImage || defaultBackgroundImage"
          alt="店铺背景"
        />
      </div>

      <!-- 蒙版 -->
      <div
        class="overlay"
        :style="overlayStyle"
      />

      <!-- 店铺信息 -->
      <div class="store-info">
        <div class="store-avatar">
          <img
            :src="data.avatar || defaultAvatar"
            alt="店铺头像"
          />
        </div>

        <div class="store-details">
          <h3 class="store-name">{{ data.name || '店铺名称' }}</h3>
          <p class="store-description">{{ data.description || '店铺描述' }}</p>
        </div>
      </div>
    </div>

    <!-- 样式四：带分隔线 -->
    <div
      v-else-if="data.styleType === 'divider-info'"
      class="store-card divider-info"
    >
      <!-- 背景图片 -->
      <div class="background-image">
        <img
          :src="data.backgroundImage || defaultBackgroundImage"
          alt="店铺背景"
        />
      </div>

      <!-- 蒙版 -->
      <div
        class="overlay"
        :style="overlayStyle"
      />

      <!-- 店铺信息 -->
      <div class="store-info">
        <div class="store-avatar">
          <img
            :src="data.avatar || defaultAvatar"
            alt="店铺头像"
          />
        </div>

        <div class="store-details">
          <h3 class="store-name">{{ data.name || '店铺名称' }}</h3>
          <p class="store-description">{{ data.description || '店铺描述' }}</p>
        </div>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 默认图片
const defaultBackgroundImage = computed(() => '/src/assets/images/default-store-bg.png')
const defaultAvatar = computed(() => '/src/assets/images/default-avatar.png')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算蒙版样式
const overlayStyle = computed(() => {
  if (props.data.overlayType === 'gradient') {
    return {
      backgroundImage: 'linear-gradient(to top, #000, transparent)'
    }
  } else if (props.data.overlayType === 'solid') {
    return {
      backgroundColor: 'rgba(0, 0, 0, 0.3)'
    }
  }

  return {}
})
</script>

<style lang="scss" scoped>
.store-information {
  width: 100%;
  box-sizing: border-box;

  .store-card {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .store-info {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;

      .store-avatar {
        margin-right: 10px;

        img {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 5px;
        }
      }

      .store-details {
        flex: 1;
        overflow: hidden;

        .store-name {
          margin: 5px 0;
          font-weight: 700;
          font-size: 18px;
          color: #fff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .store-description {
          margin: 10px 0 0;
          font-size: 12px;
          color: #fff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    // 样式一：底部信息
    &.bottom-info {
      height: 185px;

      .store-info {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        padding: 0 15px;
      }
    }

    // 样式二：圆形头像
    &.circular-avatar {
      height: 238px;

      .store-info {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 100%;
        padding: 0 15px;

        .store-avatar img {
          width: 72px;
          height: 72px;
          border-radius: 50%;
        }
      }
    }

    // 样式三：居中信息
    &.center-info {
      height: 238px;

      .store-info {
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;

        .store-avatar {
          margin: 0 0 10px;

          img {
            width: 72px;
            height: 72px;
            border-radius: 50%;
          }
        }

        .store-details {
          text-align: center;
        }
      }
    }

    // 样式四：带分隔线
    &.divider-info {
      height: 250px;

      .store-info {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;

        .store-avatar {
          margin: 0 0 10px;

          img {
            width: 72px;
            height: 72px;
            border-radius: 50%;
          }
        }

        .store-details {
          text-align: center;

          .store-name {
            line-height: 40px;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
          }
        }
      }
    }
  }
}
</style>
